<template>
  <div class="hmd_low">
    <div class="hmd_low_1">
      <div class="hmd_low_1_1">
        <my-select :items="levelItems" ph="客户等级" width="160"></my-select>
      </div>
      <div class="hmd_low_1_1">
        <my-select :items="sourceItems" ph="全部来源" width="160"></my-select>
      </div>
      <div class="hmd_low_1_2" style="margin-right: 200px">
        <my-search width="266" ph="请输入关键词搜索"></my-search>
      </div>
      <div class="hmd_low_1_3" style="margin-right: 10px">
        <my-button :color="true">批量解禁</my-button>
      </div>

      <div class="hmd_low_1_3">
        <my-button color="none">导出数据</my-button>
      </div>
    </div>
    <div style="width:1020px">
      <div class="hmd_low_2">
        <base-table
          :mydata="CzData"
          :mytitle="CzTitle"
          checkbox="true"
          type="hmd"
        ></base-table>
      </div>
      <div class="pages">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, prev, pager, next, sizes, jumper"
          :total="400"
        >
        </el-pagination>
      </div>      
    </div>

  </div>
</template>

<script>
import BaseTable from "@/components/MyTable/BaseTable.vue";
import MySelect from "@/components/MyInput/MySelect";
import MySearch from "@/components/MyInput/MySearch";
import MyButton from "@/components/MyInput/MyButton";
export default {
  components: {
    MySearch,
    MyButton,
    BaseTable,
    MySelect,
  },
  data() {
    return {
      CzData: [
        {
          name: "河北省秦皇岛市客户",
          names: "林芳",
          num: "18845678900",
          email_: "1190887@163.com",
          class_: "普通用户",
          orin: "2020/09/09 10:09",
        },
        {
          name: "河北省秦皇岛市客户",
          names: "林芳",
          num: "18845678900",
          email_: "1190887@163.com",
          class_: "普通用户",
          orin: "2020/09/09 10:09",
        },
        {
          name: "河北省秦皇岛市客户",
          names: "林芳",
          num: "18845678900",
          email_: "1190887@163.com",
          class_: "普通用户",
          orin: "2020/09/09 10:09",
        },
        {
          name: "河北省秦皇岛市客户",
          names: "林芳",
          num: "18845678900",
          email_: "1190887@163.com",
          class_: "普通用户",
          orin: "2020/09/09 10:09",
        },
        {
          name: "河北省秦皇岛市客户",
          names: "林芳",
          num: "18845678900",
          email_: "1190887@163.com",
          class_: "普通用户",
          orin: "2020/09/09 10:09",
        },
        {
          name: "河北省秦皇岛市客户",
          names: "林芳",
          num: "18845678900",
          email_: "1190887@163.com",
          class_: "普通用户",
          orin: "2020/09/09 10:09",
        },
        {
          name: "河北省秦皇岛市客户",
          names: "林芳",
          num: "18845678900",
          email_: "1190887@163.com",
          class_: "普通用户",
          orin: "2020/09/09 10:09",
        },
        {
          name: "河北省秦皇岛市客户",
          names: "林芳",
          num: "18845678900",
          email_: "1190887@163.com",
          class_: "普通用户",
          orin: "2020/09/09 10:09",
        },
        {
          name: "河北省秦皇岛市客户",
          names: "林芳",
          num: "18845678900",
          email_: "1190887@163.com",
          class_: "普通用户",
          orin: "2020/09/09 10:09",
        },
      ],
      CzTitle: [
        {
          name: "客户名称",
          prop: "name",
          width: 160,
        },
        {
          name: "真实姓名",
          prop: "names",
          width: 100,
        },
        {
          name: "电话",
          prop: "num",
          width: 135,
        },
        {
          name: "邮箱",
          prop: "email_",
          width: 170,
        },
        {
          name: "客户等级",
          prop: "class_",
          width: 120,
        },
        {
          name: "客户来源",
          prop: "orin",
          width: 175,
        },
      ],
      sourceItems: [
        {
          label: "全部终端",
          value: 0,
        },
        {
          label: "Mac",
          value: 1,
        },
        {
          label: "Windows",
          value: 2,
        },

        {
          label: "手机",
          value: 3,
        },
      ],
      levelItems: [
        {
          label: "全部等级",
          value: 0,
        },
        {
          label: "普通客户",
          value: 1,
        },
        {
          label: "VIP客户",
          value: 2,
        },

        {
          label: "潜在客户",
          value: 3,
        },
      ],
    };
  },
};
</script>

<style>
.hmd_low {
  width: 1040px;
  height: 700px;
  background-color: #ffffff;
  padding-top: 3px;
}
.hmd_low_1 {
  display: flex;
  margin-top: 20px;
  margin-left: 12px;
}
.hmd_low_1_1 {
  margin-right: 10px;
}
.hmd_low_2 {
  width: 100%;
  margin-top: 20px;
  margin-left: 10px;
}
</style>